<ol class="breadcrumb" breadcrumb="">
  <li class="breadcrumb-item ng-scope active"><span>Stories</span></li>
</ol>
<div class="container-fluid">
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-sm-12">
        <div class="alert alert-{{message.type}}" role="alert" ng-show="message.text !== ''">
          {{message.text}}
        </div>
        <div class="card">
          <div class="card-block">
            <div class="form-group row">
              <label for="select" class="col-sm-2 col-form-label">Bot</label>
              <div class="col-sm-10">
                <select id="bot_name" ng-change="loadBotStories(bot.bot_id)"
                  ng-options="bot.bot_id as bot.bot_name for bot in botList" ng-model="bot.bot_id" class="form-control">
                  <option value="">Please select one</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="row" ng-show="bot.bot_id">
    <div class="col-sm-12">
      <div class="card">
        <div class="card-header">
          <strong>Stories</strong>
          <span class="float-right">
            <a class="btn btn-ghost-primary" ng-click="addStory()"><i class="icon-plus"></i></a>
          </span>
        </div>
        <div class="card-block">
          <div class="list-group" dir-paginate="story in storyList | itemsPerPage: 5" pagination-id="storyList">
            <div class="list-group-item">
              <span id="_{{story.story_id}}"><strong>{{story.story_name}}</strong><br />{{ story.timestamp }}</span>
              <span class="float-right">
                <button class="btn btn-outline-secondary mr-2" data-toggle="collapse"
                  ng-click="toggleArrow(story.story_id)" data-target="#table_story_{{story.story_id}}"
                  aria-expanded="false" aria-controls="table_story_{{story.story_id}}">
                  <span class="icon-arrow-down" id="icon_story_{{story.story_id}}"></span>
                </button>
                <button class="btn btn btn-outline-danger" confirm-click-title="Delete Story"
                  confirm-click="Are you sure? This will delete the story." ng-click="deleteStory(story.story_id)">
                  <span class="icon-trash"></span>
                </button>
              </span>
            </div>
            <div class="collapse" id="table_story_{{story.story_id}}">
              <div class="list-group-item">
                <div class="row">
                  <div class="col-sm-8">
                    <textarea class="datainput form-control" id="{{story.story_id}}_formGroupInput2"
                      ng-model="story.story">{{ story.story }}</textarea>
                  </div>
                  <div class="col-sm-4">
                    <div class="form-group">
                      <input type="text" autocomplete="off" ng-model="story.searchText" ng-change="search(story)" class="form-control" id="search"
                        placeholder="Search for Intents, Actions and Entities">
                      <div class="list-group"
                        dir-paginate="item in story.searchList | itemsPerPage: 5"
                        pagination-id="story.searchList">
                        <div class="list-group-item">
                          <a ng-click="addToStory(item, story)" href="">{{ item.text }} <span class="float-right">{{ item.type }}</span></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <br />
                <button type="submit" ng-click="updateStory(story.story_id)" class="btn btn-sm btn-primary"><i
                    class="fa fa-dot-circle-o"></i>Save</button>

              </div>
            </div>
          </div>

          <div style="float:right">
            <dir-pagination-controls pagination-id="storyList"></dir-pagination-controls>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>